var arr = [
    {id:1,type:"火车票",before:"427.63",tax:"12.83",total:"440.46",time:"2022-12-8",dear:"",state:false},
    {id:2,type:"火车票",before:"427.63",tax:"12.83",total:"440.46",time:"2022-12-8",dear:"",state:false},
    {id:3,type:"火车票",before:"427.63",tax:"12.83",total:"440.46",time:"2022-12-8",dear:"",state:false},
    {id:4,type:"火车票",before:"427.63",tax:"12.83",total:"440.46",time:"2022-12-8",dear:"",state:false}
]
if(localStorage.getItem('List') == null){
    localStorage.setItem('List',JSON.stringify(arr))
}
var List = JSON.parse(localStorage.getItem('List'))
var tabList = document.querySelector('.tablist')
 const listmap = function(){
   return tabList.innerHTML = List.map((item,index)=>{
        return `
        <tr>
        <td><input type="checkbox" id="check"></td>
            <td>${item.id}</td>
            <td>${item.type}</td>
            <td><input type="number" value="${item.before}" id="before"/ ></td>
            <td><input type="number" value="${item.tax}"   id="tax"/ ></td>
            <td>${Number(item.before) + Number(item.tax)}</td>
            <td>${item.time}</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            </tr>
        `
    }).join("")
 }
 listmap()
var addbtn = document.querySelector('.add')
var reomve = document.querySelector(".remove")
// console.log(reomve);
var test = document.getElementById('test')
var before = document.querySelectorAll("#before")  
var tax = document.querySelectorAll("#tax")
console.log(before);
addbtn.addEventListener('click',()=>{
    let obj = {id:List[List.length-1].id+1,type:"",before:"",tax:"",total:"",time:"",dear:""}
    List.push(obj)
    localStorage.setItem('List',JSON.stringify(List))
    console.log(List);
    listmap()
})
reomve.addEventListener('click',()=>{
    let checkList = document.querySelectorAll('#check')
    let reomveList  = []
    checkList.forEach((e,index)=>{
       if(e.checked == true){
        reomveList.push(index)
        console.log(reomveList);
        reomveList.forEach((e,index)=>{
            List.splice(e,1)
            localStorage.setItem('List',JSON.stringify(List))
            listmap()
        })
       }
    })
})

test.addEventListener('click',()=>{
   let checkList = document.querySelectorAll('#check')
   checkList.forEach((e)=>{
    e.checked = test.checked
   })
})
before.forEach((e,index)=>{
    e.addEventListener('blur',()=>{
       console.log(e.value);
       List[index].before = e.value
       localStorage.setItem('List',JSON.stringify(List))
       listmap()
    })
})
console.log(tax);
tax.forEach((e,index)=>{
    e.addEventListener('blur',()=>{
       console.log(e.value);
       List[index].tax = e.value
       localStorage.setItem('List',JSON.stringify(List))
       listmap()
    })
})